<template>
    <div>
        <!-- 头部 -->
        <div class="category-header">
            <router-link tag="span" to="/index"><svg t="1640164914293" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="64511" width="16" height="16"><path d="M744.3372563 1017.13692445c11.1289837 0 22.2701037-4.2477037 30.76551111-12.74311112 16.99081482-16.99081482 16.99081482-44.54020741 0-61.51888592L345.02883555 512.80099555 775.10276741 82.7392c16.99081482-16.97867852 16.99081482-44.54020741 0-61.51888592-16.99081482-16.99081482-44.52807111-16.99081482-61.51888593 0L252.74443852 482.04762075a43.51469037 43.51469037 0 0 0 0 61.53102222l460.83944296 460.81517036c8.48327111 8.49540741 19.62439111 12.74311111 30.75337482 12.74311112z" fill="#ffffff" p-id="64512"></path></svg></router-link>
            <div class="icont-header">分类</div>
        </div>

        <!-- 女生频道 -->
        <div class="grid">
            <span>女生频道</span>
        </div>

        <div class="category-content" v-if="girllist">
            <ul>
                <router-link tag="li" :to="'/index/categorydetail?name='+item.name" v-for="(item,index) in girllist" :key="index">
                    <img :src="item.cover" alt="">
                    <div class="book-cell">
                        <span>{{item.name}}</span>
                        <p>{{item.desc}}本</p>
                    </div>
                </router-link>
            </ul>
        </div>

        <!-- 男生频道 -->
        <div class="grid boy">
            <span>男生频道</span>
        </div>


        <div class="category-content" v-if="boylist">
            <ul>
                <router-link tag="li" :to="'/index/categorydetail?name='+item.name" v-for="(item,index) in boylist" :key="index">
                    <img :src="item.cover" alt="">
                    <div class="book-cell">
                        <span>{{item.name}}</span>
                        <p>{{item.desc}}本</p>
                    </div>
                </router-link>
            </ul>
        </div>

    </div>
</template>

<script>
import {getBoy,getGirl,getBoyDetail} from "../../api/category"
export default {
    data(){
        return {
            boylist:null,
            girllist:null
        }
    },
    methods:{

    },
    created(){
        //获取男生分类
        getBoy().then(data=>{
            // console.log('男生分类',data)
            this.boylist=data.list[0].labels
        })
        //获取女生分裂
        getGirl().then(data=>{
            // console.log('女生分类',data)
            this.girllist=data.list[0].labels
        })
        //获取男生分类详情
        getBoyDetail().then(data=>{
            console.log('男生分类详情',data)
        })
    }
}
</script>

<style lang="less" scoped>
.category-header{
    width: 100%;
    height: 44px;
    background-color: #FC0E50;
    display: flex;
    align-items: center;
    span{
        display: block;
        width: 44px;
        height: 44px;
        text-align: center;
        line-height: 44px;
    }
    .icont-header{
        color: white;
        margin: auto;
        padding-right: 44px;
    }
}
.grid{
    width: 100%;
    height: 44px;
    line-height: 44px;
    margin-top: 10px;
    span{
        padding-left: 16px;
        font-size: 16px;
        font-weight: bold;
    }
}
// .boy{
//     margin-top: 10px;
// }

.category-content{
    width: 100%;
    ul{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        li{
            width: 187.5px;
            height: 80px;
            display: flex;
            img{
                width: 50px;
                height: 64px;
                margin: 15px;
            }
            .book-cell{
                margin-top: 15px;
                span{
                    font-size: 16px;
                    font-weight: bold;
                }
                p{
                    margin-top: 10px;
                    font-size: 14px;
                    color: #808080;
                }
            }
        }
    }
}
</style>